/* Importación de fuentes de google fonts */

@import url(https://fonts.googleapis.com/css?family=Noto+Sans);
style
/* Se aplica el estilo de la pagina */

header {
    font-family: 'Noto Sans';
}

body {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    background-color: hsla(221, 100%, 89%, 0.7);
    background-image: radial-gradient(rgb(148, 182, 255), rgb(148, 173, 255));
    margin-left: 0%;
    margin-right: 0%;
    margin-top: 0%;
    font-family: 'Noto Sans';
}


/* Diseño de opciones barra superior */

a {
    text-size-adjust: 1vw;
    font-family: 'Noto Sans';
    color: white;
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
    text-shadow: 2px 2px 2px rgb(42, 54, 56);
    display: inline-block;
}


/* Diseño de div general de barra superior */

.general {
    width: 100%;
    min-width: auto;
    height: 50px;
    text-align: left;
    position: fixed;
    float: none;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: rgb(255, 70, 132);
    z-index: 1;
}

@media screen and (min-width: 470px) {
    .general .opciones {
        display: inline-block;
    }
    .general .opciones2 {
        display: none;
    }
}

@media screen and (max-width: 470px) {
    .general .opciones {
        display: none;
    }
    .general .opciones2 {
        display: inline-block;
    }
}


/* Diseño div de logo */

.logo {
    float: left;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 8%;
    min-width: 100px;
    max-height: 50px;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgb(255, 70, 132);
}


/* Diseño imagen del logo */

.imgLogo {
    width: 100%;
    height: 50px;
}


/* Diseño de div para las opciones de la barra superior */

.opciones {
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    float: left;
    width: 20%;
    min-width: min-content;
    height: 50px;
    background-color: none;
}


/* Diseño de menu desplegable */

.dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    text-decoration: none;
}

.dropdown {
    display: inline-block;
    height: 50px;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: rgb(255, 70, 132);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: beige;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: rgb(255, 47, 117);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.opciones2 {
    text-align: center;
    vertical-align: middle;
    float: left;
    min-width: min-content;
    height: 46px;
    margin-left: 10px;
    background-color: none;
    border-radius: 10px;
    border-style: double;
    border-color: cornflowerblue;
    border-width: 2px;
}

.opciones:hover {
    background-color: rgb(255, 47, 117);
}


/* Diseño de link estilo boton en barra superior */

.opciones a {
    display: block;
    padding-top: 15px;
    width: 100%;
    height: 35px;
}

.opciones a:hover {
    background-color: rgb(255, 47, 117);
}


/* Diseño del div para el boton */

.boton {
    vertical-align: top;
    text-align: center;
    float: right;
    max-width: 13%;
    min-width: min-content;
    max-height: 36px;
    padding-top: 8px;
    padding-bottom: 7px;
    padding-right: 5px;
    background-color: none;
}


/* Diseño del boton */

button {
    font-size: 18px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    border-color: #ab4493;
    border-style: solid;
    text-align: center;
    text-decoration: none;
    text-shadow: 3px 3px 2px rgb(42, 54, 56);
    color: azure;
    background-color: rgb(80, 98, 255);
    padding-bottom: 5px;
    padding-top: 5px;
    font-family: 'Noto Sans';
    text-transform: uppercase;
    cursor: pointer;
}

button:hover {
    background-color: rgb(49, 69, 255);
}


/* Diseño de div imagen de fondo principal */

.imagen {
    width: 100%;
    color: rgb(31, 31, 31);
    text-align: center;
    vertical-align: middle;
    text-shadow: 0 0 3px rgb(109, 109, 109);
    font-family: 'Noto Sans';
    position: static;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: rgb(155, 170, 190);
    background-image: url(../Imagenes/portada.jpg);
    background-size: cover;
    background-attachment: fixed;
    height: fit-content;
}


/* Diseño de informacion comercial */

.informacion {
    vertical-align: top;
    width: 80%;
    min-width: 300px;
    background-color: hsla(231, 100%, 5%, 0.4);
    display: inline-block;
    border-color: none;
    border-radius: 10px;
    border-style: none;
    padding: 0px;
    text-align: left;
    color: rgb(255, 196, 0);
    margin-bottom: 0px;
}


/* Carrusel de slide principal */

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none inside;
}

.slider {
    position: relative;
    /*ul sea relativo*/
    width: 100%;
    min-width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    font-size: 20px;
    text-align: left;
}

.slider li {
    opacity: 0;
    /*Ocultamos todos los <li>*/
    transition: opacity .5s;
    position: absolute;
    /*Posicionamos en absoluto los <li>*/
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    border: 2px solid red;
    background: #fff;
    text-align: center;
}

.slider li:target {
    opacity: 1;
    /*Mostramos el <li> al que apunta el enlace*/
}

nav {
    position: relative;
}

.menu {
    text-align: center;
    vertical-align: top;
    display: flex;
    padding-top: 5px;
    justify-content: center;
}

.espacio {
    margin: 10px;
}


/* Estilo del slide */

:root {
    --carousel-height: 100%;
    --carousel-width: 100%;
}


/* Oculta el scroll horizontal */

.carousel {
    height: var(--carousel-height);
    overflow: hidden;
    width: var(--carousel-width);
}

.carousel__container {
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: hidden;
    height: 600px;
}

.carousel__slider {
    height: var(--carousel-height);
    min-width: var(--carousel-width);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    scroll-snap-align: start;
}


/* Diseño de apartado de video comercial */

@media screen and (min-width: 900px) {
    .VideoC {
        width: 400px;
        height: 400px;
        display: inline-block;
    }
    .video {
        width: 100%;
        display: inline-block;
        text-align: center;
    }
}

@media screen and (max-width: 900px) {
    .VideoC {
        width: 100%;
        height: fit-content;
        text-align: center;
    }
    .video {
        width: 300px;
        display: inline-block;
        text-align: center;
        height: 300px;
    }
}


/* Diseño de recuadros de informacion acerca de la empresa */

.areaRecuadros {
    font-family: 'Noto Sans';
    padding-bottom: 10px;
    font-size: 20px;
    text-align: center;
    text-shadow: 0 0 2px rgb(77, 77, 77);
}

.recuadros {
    width: 65%;
    min-width: 300px;
    background-color: hsla(0, 0%, 50%, 0.55);
    display: inline-block;
    border-color: transparent;
    border-radius: 10px;
    border-style: solid;
    padding: 10px;
    text-align: left;
    color: rgb(24, 24, 24);
}

.centrado {
    text-align: center;
}


/* Diseño de tamaño imagenes */

@media screen and (min-width: 470px) {
    .tamaño {
        height: 220px;
        width: 220px;
        border-radius: 10px;
        float: left;
        margin-right: 10px;
    }
}

@media screen and (max-width: 470px) {
    .tamaño {
        height: 220px;
        width: 220px;
        border-radius: 10px;
        float: right;
        margin-right: 13.5%;
        margin-bottom: 10px;
    }
}


/* Diseño titulo sucursales de mapas */

.sucursales {
    display: inline-block;
    text-align: center;
    width: 100%;
    font-family: 'Noto Sans';
    color: rgb(31, 31, 31);
    text-shadow: 1px 1px rgb(102, 104, 105);
}

.estiloMapa {
    border: 3px hsla(0, 0%, 50%, 0.55);
    border-radius: 30px;
    border-style: solid;
    text-align: center;
}


/* diseño de pie de pagina */

.piePagina {
    max-width: 100%;
    height: fit-content;
    background-color: hsla(355, 100%, 54%, 0.8);
    position: static;
    float: none;
    font-family: 'Noto Sans';
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px gray;
    background-attachment: fixed;
    background-size: cover;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
}

.columnas {
    width: 30%;
    min-width: 300px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}